<template>
  <HeaderFooterLayout>
    <template #header>
      <view class="flex items-center justify-between border-b border-b-gray-100 py-1 px-3">
        <view class="flex items-center">
          <view class="text-xl text-black font-bold">
            {{ curSession.title }}
          </view>
          <view class="mx-3" v-if="curSession.isReplying">
            正在回复...
          </view>
        </view>
        <view class="inline-flex">
          <u-button type="primary" @click="handleNew">新聊天</u-button>
        </view>
      </view>
    </template>
    <view class="py-3 h-full">
      <scroll-view :scroll-top="scrollTop" :scroll-y="true" @scroll="handleScroll" class="h-full">
        <view v-for="(item,index) in curSession.messages" :key="index">
          <view class="px-3">
            <view v-if="isShowTime(index)" class="text-gray-500 text-xs text-center">
              {{ item.createdAt }}
            </view>
<!--                        <view v-for="(item,index) in 20" :key="index">{{ item }}</view>-->
            <view class=" flex flex-col" :class="item.role==='user'?'items-end':''">
              <view class="flex items-center" :class="item.role==='user'?'flex-row-reverse':''">
                <view class="text-black font-bold">{{ item.role }}</view>
              </view>
              <view class="border  rounded-lg max-w-fit w-full p-2 break-all"
                    :class="item.role==='user'?'border-blue-500':'border-gray-700'">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <template #footer>
      <view class="m-3">
        <uni-easyinput :cursorSpacing="80" type="textarea" v-model="content"
                       placeholder="请输入内容"></uni-easyinput>
        <view class="absolute bottom-5 right-5 z-50">
          <u-button size="small" type="primary" @click="handleSend">发送</u-button>
        </view>
      </view>
    </template>
  </HeaderFooterLayout>
</template>

<script setup lang="ts">

import {useAiStore} from "@/store/ai";
import {storeToRefs} from "pinia";
import MyDayjs from "@/utils/common/myDayjs";
import HeaderFooterLayout from "@/layout/HeaderFooterLayout.vue";
import {onMounted, ref, watch} from "vue";


const aiStore = useAiStore()
const scrollTop = ref(9999)
const isScrollToBottom = ref(true)
const {sessionList, curSession} = storeToRefs(aiStore)


onMounted(() => {
  if (sessionList.value.length === 0) {
    aiStore.newSession()
  } else {
    curSession.value = sessionList.value[0]
  }
})


const content = ref('')

watch(curSession, () => {
  if (isScrollToBottom.value) {
    handleScrollToLower()
  }
}, {
  deep: true
})

const handleNew = () => {
  aiStore.newSession()
  handleScrollToLower()
}

const handleSend = () => {
  console.log(content.value)
  if (content.value.trim().length === 0) {
    uni.showToast({
      icon: 'error',
      title: '请输入内容'
    })
    return
  }
  if (curSession.value.isReplying) {
    uni.showToast({
      icon: 'error',
      title: '请等待回复'
    })
    return
  }
  aiStore.sendMessage(content.value)
  content.value = ''
  isScrollToBottom.value = true
}
const handleStop = () => {
  aiStore.stopReply()
}

const isShowTime = (index: number) => {
  if (index <= 0) {
    return true
  }
  let message: IAiMessage = curSession.value.messages.at(index) as IAiMessage
  let lastMessage: IAiMessage = curSession.value.messages.at(index - 1) as IAiMessage
  return MyDayjs(message.createdAt).diff(lastMessage.createdAt, 'minutes') > 5;
}
const handleScroll = (e: any) => {
  isScrollToBottom.value = e.detail.scrollHeight - e.detail.scrollTop <= 600;
  console.log('isScrollToBottom', isScrollToBottom.value)
}
const handleScrollToLower = () => {
  console.log('handleScrollToLower')
  scrollTop.value = 99999
  setTimeout(() => {
    scrollTop.value--
  })

}
</script>

<style scoped>

</style>